<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <UserCard :user="user"></UserCard>
        </el-col>

<!--        <el-col :span="18" :xs="24">-->
<!--          <el-card>-->
<!--            <el-tabs v-model="activeTab">-->
<!--              <el-tab-pane label="Activity" name="activity">-->
<!--                <activity />-->
<!--              </el-tab-pane>-->
<!--              <el-tab-pane label="Timeline" name="timeline">-->
<!--                <timeline />-->
<!--              </el-tab-pane>-->
<!--              <el-tab-pane label="Account" name="account">-->
<!--                <account :user="user" />-->
<!--              </el-tab-pane>-->
<!--            </el-tabs>-->
<!--          </el-card>-->
<!--        </el-col>-->

      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'
import {  getInfo } from '@/api/user.js'
import PanThumb from '@/components/PanThumb'
export default {
  name: 'Profile',
  components: { UserCard, Activity, Timeline, Account,PanThumb },
  data() {
    return {
      user: {},
      activeTab: 'activity'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
          this.user['name'] = this.name
          this.user['avatar'] = this.avatar
          this.user['role'] = 'role'
          console.log(this.user)
    }
  }
}
</script>
<style>
  .box-center {
    margin: 0 auto;
    display: table;
  }

  .text-muted {
    color: #777;
  }

  .user-profile {
    .user-name {
      font-weight: bold;
    }

    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;
    }

    .box-social {
      padding-top: 30px;

      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }

    .user-follow {
      padding-top: 20px;
    }
  }

  .user-bio {
    margin-top: 20px;
    color: #606266;

    span {
      padding-left: 4px;
    }

    .user-bio-section {
      font-size: 14px;
      padding: 15px 0;

      .user-bio-section-header {
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
</style>
